<template>
  <el-card shadow="always" :body-style="{ padding: '20px' }">
    <div class="header" style="width: 100%">
      <span class="header-title"> 项目考勤统计 </span>
    </div>
    <el-row :gutter="20">
      <el-col :span="12" :offset="0">
        <div id="attendanceChart" :style="{ height, width }" />
      </el-col>
      <el-col :span="12" :offset="0">
        <div id="absenceChart" :style="{ height, width }" />
      </el-col>
    </el-row>
    <!-- card body -->
  </el-card>

  <div></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";

const width = "100%";
const height = "400px";

const props = defineProps({
  attendance: {
    type: Number,
    default: 0,
  },
  absence: {
    type: Number,
    default: 0,
  },
});
console.log("页面初始化");
console.log(props.attendance);
console.log(props.absence);

// 初始化图表
const initChart = () => {
  let attendance = ref(props.attendance);
  let absence = ref(props.absence);
  // 本月出勤图表
  let attendanceOptions = {
    series: [
      {
        name: "Attendance Chart",
        type: "pie",
        radius: ["50%", "70%"],
        itemStyle: {
          color: function (params: any) {
            //自定义颜色
            const colorList = ["#4F9FF6", "#F5F5F5"];
            return colorList[params.dataIndex];
          },
        },
        data: [
          {
            value: attendance.value * 100,
            name: "出勤率",
            label: {
              show: true,
              fontSize: "16",
              fontWeight: "bold",
              position: "center",
              formatter: "{b}\n{c}%",
            },
          },
          { value: 100 - attendance.value * 100, name: "" },
        ],
      },
    ],
  };
  // 本月缺勤图表
  let absenceOptions = {
    series: [
      {
        name: "Absence Chart",
        type: "pie",
        radius: ["50%", "70%"],
        itemStyle: {
          color: function (params: any) {
            //自定义颜色
            const colorList = ["#4F9FF6", "#F5F5F5"];
            return colorList[params.dataIndex];
          },
        },
        data: [
          {
            value: absence.value * 100,
            name: "缺勤率",
            label: {
              show: true,
              fontSize: "16",
              fontWeight: "bold",
              position: "center",
              formatter: "{b}\n{c}%",
            },
          },
          { value: 100 - absence.value * 100, name: "" },
        ],
      },
    ],
  };
  let attendanceChart = echarts.init(
    document.getElementById("attendanceChart") as HTMLDivElement
  );
  attendanceChart.setOption(attendanceOptions);
  let absenceChart = echarts.init(
    document.getElementById("absenceChart") as HTMLDivElement
  );
  absenceChart.setOption(absenceOptions);
};

onUpdated(() => {
  initChart();
});
</script>

<style lang="scss" scoped>
.pt20 {
  padding-top: 20px;
}

.header-title {
  font-size: 16px;
  color: #101010;
  font-weight: 600;
}

.header-description {
  font-size: 14px;
  color: #a3a3a3;
}
</style>
